---
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
title: ContextMenuArea
description: ContextMenuArea element api.
---
import SlintProperty from '/src/components/SlintProperty.astro';
import Link from '/src/components/Link.astro';

Use the non-visual `ContextMenuArea` element to declare an area where the user can show a context menu.

The context menu is shown if the user right-clicks on the area covered by the `ContextMenuArea` element,
or if the user presses the "Menu" key on their keyboard while a `FocusScope` within the `ContextMenuArea` has focus.
On Android, the menu is shown with a long press.
Call the `show()` function on the `ContextMenuArea` element to programmatically show the context menu.

One of the children of the `ContextMenuArea` must be a `Menu` element, which defines the menu to be shown.
There can be at most one `Menu` child, all other children must be of a different type and will be shown as regular visual children.
Define the structure of the menu by placing `MenuItem` or `Menu` elements inside that `Menu`.

## Function

### show(Point)

Call this function to programmatically show the context menu at the given position relative to the `ContextMenuArea` element.

## close()

Close the context menu if it's currently open.

## `Menu`

Place the `Menu` element in a <Link type="MenuBar" />, a `ContextMenuArea`, or within another `Menu`.
Use `MenuItem` children of individual menu items, and `Menu` children to create sub-menus.

### Properties of `Menu`

#### title
<SlintProperty propName="title" typeName="string" defaultValue='""'>
This is the label of the menu as written in the menu bar or in the parent menu.
</SlintProperty>

## `MenuItem`

A `MenuItem` represents a single menu entry. It's must be a child of a `Menu` element.

### Properties of `MenuItem`

#### title

<SlintProperty propName="title" typeName="string" defaultValue='""'>
The title shown for this menu item.
</SlintProperty>

### Callbacks of `MenuItem`

#### activated()

Invoked when the menu entry is activated.

## Example

```slint
export component Example {
    ContextMenuArea {
        Menu {
            MenuItem {
                title: @tr("Cut");
                activated => { debug("Cut"); }
            }
            MenuItem {
                title: @tr("Copy");
                activated => { debug("Copy"); }
            }
            MenuItem {
                title: @tr("Paste");
                activated => { debug("Paste"); }
            }
        }
    }
}
```
